<template>
  <!-- 重点指标数据 -->
  <div class="list-box">
    <div class="item-box" v-for="(item, index) in listData">
      <div class="title-box">
        <!-- <van-icon name="after-sale" color="rgb(238, 134, 50)" size="18" /> -->
        <img src="@/assets/pan-view/编组 2.png" />
        <div>{{ item.title }}</div>
      </div>
      <div class="bottom-box">
        <div class="value-box">
          <div class="title">{{ item.kpiValueTitle }}</div>
          <div class="value">{{ item.kpiValue }}</div>
        </div>
        <div class="value-box">
          <div class="title">{{ item.kpiSumValueTitlte }}</div>
          <div class="sum-value">{{ item.kpiSumValue }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/api/index";
import { ref, reactive, toRefs, onMounted } from "vue";
import store from "@/store/index";
import { useRouter } from "vue-router";

export default {
  props: ["listData"],
  setup(props) {
    let listData = props.listData;
    let state = reactive({
      listData: listData,
    });

    onMounted(() => {});
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.list-box {
  margin-top: 10px;
  width: 100%;
  height: calc(100% - 154px);
  padding-bottom: 10px;
  overflow: auto;
  .item-box {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 110px;
    border-radius: 10px;
    // background: #ffffff;
    background: url("@/assets/pan-view/编组 4.png") no-repeat 0 0;
    background-size: 100% 100%;
    .title-box {
      display: flex;
      padding: 10px;
      align-items: center;

      img {
        height: 24px;
        width: 24px;
      }

      div {
        margin-left: 5px;
        color: black;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .bottom-box {
      margin: 10px;
      width: 100%;
      display: flex;

      .value-box {
        width: 50%;

        .title {
          margin-left: 20px;
          font-size: 16px;
          color: #dedede;
        }

        .value {
          margin-top: 10px;
          margin-left: 20px;
          font-size: 20px;
          color: #ff9900;
          font-weight: bold;
        }

        .sum-value {
          margin-top: 10px;
          margin-left: 20px;
          font-size: 20px;
          color: black;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
